<template>
  <div class="advanced-searchs">
    <div class="basic-search">
      <el-input placeholder="请输入" v-model="state.input" class="input-with-select">
        <template #prepend>
          <el-select v-model="state.select" placeholder="请选择">
            <el-option v-for="item of props.searchFields" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>          
        </template>
      </el-input>

      <el-button v-if="!state.searchList.length" :icon="Plus" @click="handleAdd"></el-button>
    </div>

    <div class="searchList">
      <div v-for="(item, index) of state.searchList" :key="index" class="searchList-item">
        <div class="relationship">
          <el-select v-model="item.relationship" placeholder="请选择">
            <el-option v-for="item of state.relationshipList" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </div>
        <el-input placeholder="请输入" v-model="item.input" class="input-with-select">
          <template #prepend>
            <el-select v-model="item.select" placeholder="请选择">
              <el-option v-for="item of props.searchFields" :label="item.label" :key="item.value" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-input>
        <div class="btn-group">
          <el-button :icon="Minus" @click="handleReduce(index)"></el-button>
          <el-button v-if="index === state.searchList.length - 1" :icon="Plus" @click="handleAdd()"></el-button>
        </div>
      </div>
    </div>

    <el-button @click="searchResult" type="primary">检索</el-button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

import { Plus, Minus } from "@element-plus/icons-vue";

const props = defineProps({
  searchFields: {
    type: [Array, Object],
    deafult: () => []
  },

  width: {
    type: [String, Number],
    default: 80
  }
})

interface ads {
  input:string,
  select: string,
  searchList:Array<any>,
  relationshipList:Array<any>
}

const state = reactive<ads>({
  input: '',
  select: '',
  searchList: [],
  relationshipList: [
    {
      label: 'AND',
      value: '&&'
    },
    {
      label: 'OR',
      value: '||'
    },
    {
      label: 'NOT',
      value: '&&!'
    }
  ]
})

const handleAdd = () => {
  state.searchList.push({
    select: '',
    input: '',
    relationship: ''
  })
  nextTick(() => {
    let doms:any = document.querySelectorAll('.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper')
    doms = [...doms]
    doms.forEach((i:any) => {
      i.style.width = props.width + 'px'
    })
  })
}

const handleReduce = (index:any) => {
  state.searchList.splice(index, 1)
}

const searchResult = () => {
  if (state.searchList.length) {
    const temp = JSON.stringify(state.searchList)
    const index = temp.indexOf('\"\"')
    if (index === -1 && state.input && state.select) {
      const allData = JSON.parse(JSON.stringify(state.searchList))
      allData.push({
        select: state.select,
        input: state.input,
        relationship: '&&'
      })
      const result = handleData(allData)
      console.log(result)
    } else {
      ElMessage({
        type: 'warning',
        message: '请输入完整的信息'
      })
    }
  } else {
    if (state.input && state.select) {
      console.log(state.input)
      console.log(state.select)
    } else {
      ElMessage({
        type: 'warning',
        message: '请输入完整的信息'
      })
    }
  }
}

const handleData = (allData:any) => {
  function innerMethod (data:any, relationship:any) {
    if (data && data.length) {
      const groupObject = data.reduce((acc:any, cur:any) => {
          if (!acc[cur.select]) {
              acc[cur.select] = []
          }
          acc[cur.select].push(cur)
          return acc
      }, {})
      return groupObject
    } else {
      return []
    }
  }

  const ANDList = allData.filter((i:any) => {
    return i.relationship === '&&'
  })
  const ORList = allData.filter((i:any) => {
    return i.relationship === '||'
  })
  const NOTList = allData.filter((i:any) => {
    return i.relationship === '&&!'
  })

  const ANDArr = innerMethod(ANDList, '&&')
  const ORArr = innerMethod(ORList, '||')
  const NOTArr = innerMethod(NOTList, '&&!')

  return {
    and: ANDArr,
    or: ORArr,
    not: NOTArr
  }
}

onMounted(() => {
  state.select = (props.searchFields as any)[0].value

  nextTick(() => {
    let doms:any = document.querySelectorAll('.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper')
    doms = [...doms]
    doms.forEach((i:any) => {
      i.style.width = props.width + 'px'
    })
  })
})
</script>

<style scoped lang="scss">
.advanced-searchs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
  :deep(.input-with-select) {
    width: 500px;
  }
  .basic-search {
    padding-left: 16px;
    :deep(.el-button) {
      background-color: #ccc;
      color: #fff;
      font-weight: bolder;
      padding: 0 !important;
      width: 32px;
      height: 32px;
      margin-left: 10px;
      .el-icon-plus:before {
        font-weight: 700;
        font-size: 16px;
      }
      .el-icon-minus:before {
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
  .searchList {
    margin-top: 20px;
    .searchList-item {
      margin-bottom: 15px;
      display: flex;
      .relationship {
        .el-select {
          width: 90px;
          margin-right: 10px;
        }
      }
      .btn-group {
        margin-left: 10px;
        :deep(.el-button) {
          background-color: #ccc;
          color: #fff;
          font-weight: bolder;
          padding: 0 !important;
          width: 32px;
          height: 32px;
          .el-icon-plus:before {
            font-weight: 700;
            font-size: 16px;
          }
          .el-icon-minus:before {
            font-weight: 700;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>